<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0; z-index: 10"
      @click="deletePanelItem"
    />
    <div class="drawing-board">
      <h3>
        这是一个画板，您可以随意涂写和绘画！支持撤销(Ctrl+Z) / 恢复(Ctrl+Y)操作
      </h3>
      <div
        :id="`container${id}`"
        ref="container"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </el-card>
</template>

<script lang="ts" setup name="DemoFineReport">
import Board from "@/assets/js/board.js";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  activeShow: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});
const { panelSetIcon, id, url, params, activeShow } = toRefs(props);

const container = ref();
const canvasParent = ref();
const canvas = ref();
let observer: ResizeObserver | null = null;
let resizeTimer: any = null;

watch(
  () => activeShow.value,
  () => {
    if (activeShow.value && !observer) {
      setTimeout(() => {
        new Board(container.value);
        // 新建一个画板
        canvasParent.value = document.getElementById(`container${id.value}`);
        canvasParent.value = document.getElementById(`container${id.value}`);
        canvas.value = canvasParent.value.getElementsByTagName("canvas")[0];
        observer = new ResizeObserver(handleResize);
        observer.observe(canvasParent.value);
      }, 200);
    }
  },
  {
    immediate: true,
  }
);
function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

onMounted(() => {});

const handleResize = (entries: any) => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    for (const entry of entries) {
      const { width, height } = entry.contentRect;
      canvas.value.style.width = `${width}px`;
      canvas.value.style.height = `${height}px`;
    }
  }, 200);
};

onUnmounted(() => {
  // 在组件销毁前取消观察
  if (observer) {
    observer.disconnect();
  }
});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}
.drawing-board {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  h3 {
    position: fixed;
    top: 10px;
    left: 50%;
    width: 80%;
    font-size: 14px;
    transform: translateX(-50%);
    text-align: center;
  }
}
</style>
